<template>
    <div class="app-container" >
        <el-row style="background-color: yellow;">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">客户信息</div>
            </el-col>
        </el-row>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="借款订单编号" prop="id">
                <el-input v-model="queryParams.id" placeholder="" clearable style="width: 140px"
                    @keyup.enter.native="handleQuery" readonly="readonly" />
            </el-form-item>
            <el-form-item label="借款状态" prop="borrowStatus">
                <el-input v-model="queryParams.borrowStatus" placeholder="" clearable style="width: 150px"
                    @keyup.enter.native="handleQuery" readonly="readonly" />
            </el-form-item>
            <el-form-item label="客户姓名" prop="clientName">
                <el-input v-model="queryParams.clientName" placeholder="" clearable style="width: 140px"
                    @keyup.enter.native="handleQuery" readonly="readonly" />
            </el-form-item>
            <el-form-item label="来源渠道" prop="source">
                <el-input v-model="queryParams.source" placeholder="" clearable style="width: 140px"
                    @keyup.enter.native="handleQuery" readonly="readonly" />
            </el-form-item>
            <el-form-item label="客户电话" prop="clientPhone">
                <el-input v-model="queryParams.clientPhone" placeholder="" clearable style="width: 140px"
                    @keyup.enter.native="handleQuery" readonly="readonly" />
            </el-form-item>

        </el-form>
        <el-row style="background-color: yellow;">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">房产信息</div>
            </el-col>
        </el-row>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="购房时间" prop="buyTime">
                <el-input v-model="queryParams.buyTime" placeholder="" clearable style="width: 150px"
                    @keyup.enter.native="handleQuery" readonly="readonly" />
            </el-form-item>
            <el-form-item label="房产类型" prop="houseType">
                <el-input v-model="queryParams.houseType" placeholder="" clearable style="width: 150px"
                    @keyup.enter.native="handleQuery" readonly="readonly" />
            </el-form-item>
            <el-form-item label="购房价格(m²/单价)" prop="buyPrice">
                <el-input v-model="queryParams.buyType" placeholder="" clearable style="width: 150px"
                    @keyup.enter.native="handleQuery" readonly="readonly" />
            </el-form-item>
            <el-form-item label="建筑面积(m²)" prop="area">
                <el-input v-model="queryParams.area" placeholder="" clearable style="width: 150px"
                    @keyup.enter.native="handleQuery" readonly="readonly" />
            </el-form-item>
            <el-form-item label="建成年代" prop="houseAge">
                <el-input v-model="queryParams.houseAge" placeholder="" clearable style="width: 150px"
                    @keyup.enter.native="handleQuery" readonly="readonly" />
            </el-form-item>
            <el-form-item label="产权证号" prop="titleDeedNum">
                <el-input v-model="queryParams.titleDeedNum" placeholder="" clearable style="width: 150px"
                    @keyup.enter.native="handleQuery" readonly="readonly" />
            </el-form-item>
            <el-form-item label="土地证号" prop="landCertificateNum">
                <el-input v-model="queryParams.landCertificateNum" placeholder="" clearable style="width: 150px"
                    @keyup.enter.native="handleQuery" readonly="readonly" />
            </el-form-item>
            <el-form-item label="契税证号" prop="deedTaxNum">
                <el-input v-model="queryParams.deedTaxNum" placeholder="" clearable style="width: 150px"
                    @keyup.enter.native="handleQuery" readonly="readonly" />
            </el-form-item>
            <el-form-item label="上市许可证" prop="listingLicense">
                <el-input v-model="queryParams.listingLicense" placeholder="" clearable style="width: 150px"
                    @keyup.enter.native="handleQuery" readonly="readonly" />
            </el-form-item>
            <el-form-item label="房产地址" prop="houseAddress">
                <el-input v-model="queryParams.houseAddress" placeholder="" clearable style="width: 150px"
                    @keyup.enter.native="handleQuery" readonly="readonly" />
            </el-form-item>
            <el-form-item label="详细地址" prop="fullAddress">
                <el-input v-model="queryParams.fullAddress" placeholder="" clearable style="width: 150px"
                    @keyup.enter.native="handleQuery" readonly="readonly" />
            </el-form-item>
            <el-form-item label="处置状态" prop="disposalStatus">
                <el-input v-model="queryParams.disposalStatus" placeholder="" clearable style="width: 150px"
                    @keyup.enter.native="handleQuery" readonly="readonly" />
            </el-form-item>
            <el-form-item label="创建时间" prop="createTime">
                <el-input v-model="queryParams.createTime" placeholder="" clearable style="width: 250px"
                    @keyup.enter.native="handleQuery" readonly="readonly" />
            </el-form-item>
        </el-form>

        <!-- <el-table v-loading="loading" :data="resData" @selection-change="handleSelectionChange">

            <el-table-column label="借款订单编号" prop="id" width="100" />
            <el-table-column label="借款状态" prop="id" width="100" />
            <el-table-column label="借款订单编号" prop="id" width="100" />
            <el-table-column label="借款订单编号" prop="id" width="100" />
            <el-table-column label="借款订单编号" prop="id" width="100" />
            <el-table-column label="产权证号" prop="titleDeedNum" :show-overflow-tooltip="true" width="80" />
            <el-table-column label="房产类型" prop="houseType" :show-overflow-tooltip="true" width="100" />
            <el-table-column label="来源渠道" prop="source" width="100" />
            <el-table-column label="处置状态" prop="disposalStatus" width="80" />
            <el-table-column label="建筑面积(m²)" prop="area" width="110" />
            <el-table-column label="客户姓名" prop="clientName" width="80" />
            <el-table-column label="客户手机号" prop="clientPhone" width="160" />
            <el-table-column label="创建时间" prop="createTime" width="200" />
            <el-table-column label="创建时间" prop="createTime" width="200" />
            <el-table-column label="创建时间" prop="createTime" width="200" />
            <el-table-column label="创建时间" prop="createTime" width="200" />
            <el-table-column label="创建时间" prop="createTime" width="200" />
            <el-table-column label="创建时间" prop="createTime" width="200" />

        </el-table> -->

    </div>
</template>
  
<script>
import { findOne } from '@/api/pledge/houseProperty'


export default {

    
    dicts: ['house_manager_disposal_status'],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,

            
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            resData: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                roleName: undefined,
                roleKey: undefined,
                status: undefined,

                id: undefined,
                clientName: undefined,
                borrowStatus: undefined,
                source: undefined,
                clientPhone: undefined,
                buyTime: undefined,
                buyType: undefined,
                area: undefined,
                houseAge: undefined,
                titleDeedNum: undefined,
                landCertificateNum: undefined,
                deedTaxNum: undefined,
                listingLicense: undefined,
                houseAddress: undefined,
                fullAddress: undefined,
                createTime: undefined
            },
            // 表单参数
            form: {},
            defaultProps: {
                children: "children",
                label: "label"
            },
            // 表单校验
            rules: {
                roleName: [
                    { required: true, message: "角色名称不能为空", trigger: "blur" }
                ],
                roleKey: [
                    { required: true, message: "权限字符不能为空", trigger: "blur" }
                ],
                roleSort: [
                    { required: true, message: "角色顺序不能为空", trigger: "blur" }
                ]
            }
        };
    },
    created() {
        const id = this.$route.params.id;
        this.id = id;
        console.log(this.id);
        this.getOne();
    },
    methods: {

        getOne() {
            this.loading = true;
            findOne(this.id).then(res => {
                console.log(res);
                let resData = [];
                resData.push(res.data);
                this.queryParams = resData[0];
                console.log(res.data);
                this.loading = false;
            }
            ).catch()
        },


        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 取消按钮（数据权限）
        cancelDataScope() {
            this.openDataScope = false;
            this.reset();
        },
        // 表单重置
        reset() {

        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.roleId)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },

        /** 导出按钮操作 */
        handleExport() {
            this.download('houseProperty/export', {
                ...this.queryParams
            }, `房屋管理信息_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>
<style>

</style>